<template>
  <div class="OneVOne" v-show="isShow">
    <div class="title">
      {{"双人PK"}}
    </div>
    <!-- <div class="searchPK">
      <router-link to="/SearchPK">搜索用户PK</router-link>
    </div>
    <div class="selectPK">
      <router-link to="/SelectPK">选择用户PK</router-link>
    </div> -->
    <div class="test">
      <el-radio-group v-model="radio1">
        <el-button type="success" icon="el-icon-check"  round @click="$router.push('/SearchPK')">
          随机用户PK
        </el-button>

        <el-button type="info" icon="el-icon-star-off" round @click="$router.push('/SelectPK')"> 
          选择用户PK
        </el-button>
      </el-radio-group>

    </div>



      
    

  </div>

</template>

<script>
export default {
  data () {
    return {
      isShow:false
    };
  },
    mounted () {
    if (this.$store.getters.getIsLogin) {
      this.isShow=true
    } else {
      this.$notify({
        title: '提示',
        message: '登录后才能查看挑战模式哦',
        type: 'warning',
        offset: 100,
        duration: 3000
      })
    }
  },
  destroyed () {
    // 离开这个组件销毁一次ECharts实例，如果不手动销毁，ECharts内部有一个计时器会永久存在，切换界面切换回去后会越来越卡。
    this.myChart.dispose()
  },
}
</script>


<style scoped>
.OneVOne {
  background: url(../../assets/OneVOne.png);
  background-size: 100% 100%;
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 20px;
  width: auto;
  min-height: 700px;
  height: auto;
  /* width: 70%;
    margin: auto;
  height: 100%;
  min-height: 800px; */

}

.title {
  color: #fafafa;
  width: 80%;
  font-size: 500%;
  top: 200px;
  position: absolute;
}

.searchPK {
  color: #fafafa;
  width: 55%;
  height: 20%;
  font-size: 300%;
  top: 400px;
  position: absolute;
}

.selectPK {
  color: #fafafa;
  width: 105%;
  height: 20%;
  font-size: 300%;
  top: 450px;
  position: absolute;
}

.test {
  color: #fafafa;
  width: 80%;
  height: 20%;
  font-size: 900%;
  top: 450px;
  margin-top: 50px;
  position: absolute;
}

</style>
